<template>
	<div class="great-video-more-box" :class="$channel=='zyzq'&&getPlatform =='app'?'great-video-more-container':''">
		<div ref='top' class="great-top">
			<header ref='header'>
				<div v-if='isTopHeader'>
					<!-- <div class="toBack" @click="back">
						<Iconfont iconClass="right" />
					</div> -->
					<HeaderNav v-if="$channel=='zyzq'&&getPlatform=='app'" :title="'精彩视频'" :isSearch='true' @formChildMsg='searchTrue'></HeaderNav>
					<div v-else>
						<p class="header-text">精彩视频</p>
						<div class="search-btn-box">
							<Iconfont iconClass="sousuo begin-search-ru" @click.native="searchTrue" />
						</div>
					</div>
				</div>								
				<div  v-if="isSearch" class="search-wrap"  >
		            <form  @submit.prevent action="#">
		              <input id="jincaishiping_sousuo" type="search" placeholder="请输入搜索关键字" v-model="searchKeyword"  @keyup.13="handelSearch" ref="inputSearch">
		            </form>
		            <Iconfont iconClass="sousuo "/>
		            <div class="cancel"  @click="cancel">取消</div>
		        </div>
			</header>		
			<div class="nav-table">
				<ul class="parentClassUl">
					<li class="parentClassLi" :class="[isParentCurClass==v.id?'curParentClass':'']" v-for="(v,vIndex) in dataMenuArray" key="v.id" @click.stop.prevent="clickParentMenu(v,vIndex)">
						<p>{{v.title}}</p>
						<!--<p>{{v.tagName+v.id}}</p>-->
						<!-- <div class="nav-er-table" v-if="isParentCurClass==v.id">
							<ul class="childenClassUl">
								<li class="childenClassLi" :class="[curChildClass==w.id?'curChildClass':'']" v-for="(w,wIndex) in v.children" @click.stop.prevent="clickChildMenu(w.id)">{{w.title}}</li>
							</ul>
						</div> -->
					</li>
        </ul>
				<!--<div class="select-nav-table">
					<div class="select-nav-table-img" @click="linkSenMenu()"></div>
				</div>-->
				<div class="select-right" @click.stop="clickSelectRight">
					<p>{{selectLeft}}</p>
					<Iconfont iconClass="iconfont iconyoujiantou1" />
				</div>
				<div class="select-right-down" v-if="isSelectRight">
					<ul>
						<li :class="[selText==v.type?'curLeftSelect':'']" @click="clickSelectOption(v,index)" v-for="(v,index) in tabsParam">{{v.value}}</li>
					</ul>
				</div>
      </div>
      <div class="nav-er-table">
        <ul class="childenClassUl">
          <li class="childenClassLi" :class="[curChildClass==w.id?'curChildClass':'']" v-for="(w,wIndex) in menuChildArr" @click.stop.prevent="clickChildMenu(w.id)">{{w.title}}</li>
        </ul>
      </div>
		</div>
		<div class="mask" v-show="maskShow" @touchmove.prevent></div>
		<div  :class="[connectBox]"  ref="connect">
			<ul class="h-great-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"  >
				<li v-for="v in greatVideoArray" @click="linklookBackVideo(v)">
			    	<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" v-on:click.self.prevent/>
			    	 <p>{{v.title}}</p>
			    </li>
			</ul>
			<p class="tip-text">{{tipText}}</p>
		</div>
	</div>
</template>

<script>
import HeaderNav from '../../components/zyzq/headerNav'
	export default {
		components:{
          HeaderNav,
		},
		data() {
			return {
        dataMenuArray:[],//菜单数据
        menuChildArr:[],//二级菜单
                isTop: false,
				isSearch:false,//搜索框
				isTopHeader:true,
				maskShow:false,//黑色覆盖层
				searchKeyword:'',
				isParentCurClass: '', //父选中状态
				curChildClass:'',//自己选中样式
				greatVideoArray:[],//视频数组
				
				parId:this.$route.query.parId,//要传的父id
				cateType:'',//要传的标签id
				selText:'',//要传的最新最热
				
				selectLeft: '按最新',
				isSelectRight:false,//左边下拉框显示不显示
				tabsParam: [{
						value: '按最新',
						type: ''
					},
					{
						value: '按最热',
						type: 'pv'
					}
				],
				page: 0, //页码
				busy: false, //打开滚动
			    tipText: "",//底部文本提示
			    connectBox:'',//视频区域样式  gread-video-box
				scroll:'',//页面滚动高度
				getPlatform:fun.getPlatform() //app wx
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			this.getMenuData();
			if(this.$route.query.sel){//有值是pv
				this.selectLeft = '按最热'
				this.selText = 'pv'
			}else{
				this.selectLeft = '按最新'
				this.selText = ''
			}
			if(this.$route.query.parId){//有值是pv
				this.isParentCurClass = this.$route.query.parId
			}else{//全部
				this.isParentCurClass = ''
			}
			if(this.$route.query.parId==this.$route.query.cateType){//相等说明只有父标签
				this.cateType = this.$route.query.parId
			}else{//不相等 取值子的 
				this.cateType = this.$route.query.cateType
			}
			
			
			let lcoStorHomeGreatData  = window.sessionStorage.getItem(this.$channel+'homeGreatData');
			if(lcoStorHomeGreatData){//配置菜单 
				JSON.parse(lcoStorHomeGreatData).map((item)=>{
				//console.log(item)
				if(item.id==this.$route.query.parId){
					if(item.children.length==0){//里面的子元素为空					
						this.connectBox = 'gread-video-box-big'
					}else{//不为空
							this.connectBox = 'gread-video-box'
							//console.log(item.children)
							this.curChildClass = item.children[0].id
					}
				}else{
					if(this.$route.query.parId==''){
						this.connectBox = 'gread-video-box-big'
					}
				}
			})
			}else{//没有配置菜单
				this.connectBox = 'gread-video-box-noMenu'
			}

		},
		mounted() {
          //console.log(this.$channel)
          this.$store.dispatch("hideNav"); //下面导航的隐藏
          let _this = this;
          	_this.$refs.connect.addEventListener('scroll',_this.handleScroll);
          },
		activated() {
		  this.$store.dispatch("hideNav"); //下面导航的隐藏
		  let _this = this;
		    if(_this.scroll > 0){
		       _this.$refs.connect.scrollTo(0, _this.scroll);
		       _this.scroll = 0;
          	  _this.$refs.connect.addEventListener('scroll',_this.handleScroll);
		    }
		},
		deactivated(){
			let _this = this;
		     _this.$refs.connect.removeEventListener('scroll',_this.handleScroll);
		},
		methods: {
			handleScroll () {
			  let scrollTop = this.$refs.connect.scrollTop;
			  this.scroll = scrollTop;
			  //console.log(this.scroll)
			},
			loadMore: function() {
				this.busy = true;
				// 多次加载数据
				
				this.tipText = "数据加载中..."
				setTimeout(() => {
					this.page++;
					this.getArrayData(this.selText,this.parId,'');
				}, 10);

			},
			getArrayData(sel,pType,type) { //sel 空为最新 pv是热门  pType 父级菜单  type子集菜单
				let _this = this;
				//请求特色频道列表      page=" + _this.page + "&pageSize=10&type=" + _this.cateType+ "&sel=" + _this.selText
				_this.$http.get("h5live/getHomeVideo",{
					params: {
						p: _this.page,
						sel:sel,
						pType:pType,//父级菜单
						type:type,//子集菜单
					}
				}).then( //sel 空为最新 pv是热门
					res => {
						//console.log(res.data)
						if(res.data.code == '000000') {
							if(res.data.data.length) {
								_this.busy = false;
								_this.greatVideoArray =[..._this.greatVideoArray,...res.data.data]
								
								if(_this.greatVideoArray.length < 10) {
									_this.busy = true; //禁用
									_this.tipText = ""
								}
							} else {
								_this.busy = true; //禁用
								_this.page = 0
								_this.tipText = "没有更多数据了"
							}
							//this.goods = this.goods.concat(res.data.result);

							// 第一次加载数据
							//_this.dataArray = res.data.data;
							// 当第一次加载数据完之后，把这个滚动到底部的函数触发打开
							//this.busy = false;

						} else {
							console.log("接口报错")
						}

					}
				);
			},
			clickParentMenu(v, vIndex) { //点击父菜单
			    let lcoStorHomeGreatData  = window.sessionStorage.getItem(this.$channel+'homeGreatData');
			    if(v.id==''){//点击全部
						this.connectBox = 'gread-video-box-big'
          }
          this.menuChildArr = []
				  JSON.parse(lcoStorHomeGreatData).map((item)=>{
            if(item.id==v.id){
              if(item.children.length){//有子集
                this.menuChildArr = item.children
                console.log(this.menuChildArr)
                this.connectBox = 'gread-video-box'
              }else{							
                this.connectBox = 'gread-video-box-big'
              }
            }
				})
				this.greatVideoArray = [];//数组清空
				this.page = 1;
				this.isParentCurClass = v.id
				this.parId = v.id;
				this.cateType = '';
				this.curChildClass = null
				this.getArrayData(this.selText,v.id,'');
			},
			clickChildMenu(id){//点击子菜单
				//console.log(id)
			   this.page = 1;
			   this.connectBox = 'gread-video-box'
			   this.greatVideoArray = [];//数组清空
               this.cateType = id
               this.curChildClass = id;
               if(!id){
               	this.cateType = ''
               }
               this.getArrayData(this.selText,this.parId,this.cateType);
			},
			getMenuData() { //头部列表数据
				this.$http.get("/h5live/getHomeVideoType")
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length) { //有值
								//this.dataMenuArray = res.data.data;
								let allBtn = [{
									channel: "",
									children: [],
									creator: "",
									id: "",
									parentId: 0,
									title: "全部",
								}]
                this.dataMenuArray = [...allBtn,...res.data.data];
								//window.localStorage.setItem(this.$channel+'homeGreatData',JSON.stringify(res.data.data))
							} else { //无值 不显示按钮
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},

			clickMoreGreatPage(){//跳转更多
				this.$router.push({
					path: `/${this.$channel}/geratMoreVideo`,
					query: {
						//tabNum: this.nowIndex
						sel:this.selText,
						cateType:this.cateType
						
					}
				});
			},
			searchTrue() { //点击搜索页面
              this.isTopHeader = false
              this.isSearch = true;
              this.maskShow = true;
              this.searchKeyword='' ;
              let _this = this
              setTimeout(()=>{//不加延迟 控制台报错 报错'focus' of undefined
	     	    _this.$refs.inputSearch.focus();
	     	 },1000)
			},
			//取消
			cancel(){
			  this.isTopHeader = true
              this.isSearch = false
               this.maskShow = false
               this.searchKeyword=''
			},
			//开始搜索
			  handelSearch(){
			  	//console.log(this.selText)
			  	//console.log(this.$route.query.parId)
			      this.maskShow=false;
			       this.isSearch = false;
			       this.isTopHeader =true;
			      this.$refs.inputSearch.blur();
			      this.$router.push({
			        path: `/${this.$channel}/liveMoreSearch`,
			        query: {
			          content: this.searchKeyword,
			          sel:this.selText,
			          parId:this.$route.query.parId,
			          type: '',
			        }
			      })	
			 },
			 back(){//返回
          this.$router.push(`/${this.$channel}/zyzqHome`)
			 },
			 clickSelectRight(){
			 	this.isSelectRight = !this.isSelectRight;//取反
			 },
			 clickSelectOption(v,index){
			 	this.page = 1;
			 	this.greatVideoArray = [];//数组清空
				this.selectLeft = v.value;
				this.selText = v.type;
				this.isSelectRight = false;
				this.getArrayData(v.type,this.parId,this.cateType)
				//this.getHomeVideo(this.selText,this.cateType);//sel  cateType
			 },
			 //跳转回看
			 linklookBackVideo(v){
        this.$router.push(`/${this.$channel}/liveBack/${v.id}?dzhPage=true`);
			 }
		},
	}
</script>

<style scoped="scoped">
	header .toBack {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 20px;
	}
	
	header .toBack i {
		font-size: 34px;
		color: #000;
	}
	
	header {
		position: relative;
		background: white;
		top: 0;
		left: 0;
	}
	
	header .header-text {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
		/*background: sandybrown;*/
	}
	.search-btn-box {
		height: 80px;
		position: absolute;
		top: 0;
		right: 30px;
		display: flex;
		align-items: center;
	}
	
	.begin-search-ru {
		font-size: 40px;
	}
	.mask{
	  width: 100vw;
	  height: calc(100vh - 80px);
	  position: fixed;
	  top:80px;
	  background:rgba(0,0,0,1);
	  opacity:0.4;
	  z-index: 10;
	}
	
	.search-wrap{
  display: flex;
  padding-left: 20px;
  align-items:center;
  opacity: 1;
  margin-top: 12px;
}

.search-wrap.searchShow{
  opacity: 1;
}
.search-wrap i{
  position: absolute;
  left:50px;
  font-size: 30px;
  color: #666;
  top:15px;
}
.search-wrap input{
  width: 620px;
  height: 60px;
  background:rgba(246,246,246,1);
  border-radius:30px;
  background: #F6F6F6;
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 30px;
}
.search-wrap .cancel{
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}

	.curParentClass {
		color: #F35757 !important;
	}
	.curChildClass{
		color: white !important;
		background:#FF0000 !important;
		border: 1px solid #FF0000 !important;
	}
	.curParentClassAll {
		/*全部*/
		color: #F35757 !important;
	}
	
	.curLeftSelect {
		color: #ED5400 !important;
	}
	
	.h-great-tab ul {
		width: 750px;
		/*height: 60px;*/
		white-space: nowrap;
		overflow-x: scroll;
		margin-top: 15px;
		padding-right: 120px;
		/*margin-left: 45px;*/
		/* padding:  30px 120px 20px  30px;*/
	}
	
	.h-great-tab ul li {
		display: inline-block;
		margin-right: 45px;
		/*border-bottom: 4px solid #FF3B30;*/
		line-height: 45px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}
	
	.h-great-tab ul li:first-child {
		margin-left: 45px;
	}
	
	.select-right-down {
		width: 115px;
		height: 120px;
		position: absolute;
		top: 170px;
		right: 30px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    z-index: 10;
	}
	
	.select-right-down ul li {
		width: 85px;
		height: 62px;
		font-size: 22px;
		font-weight: 300;
		color: #666666;
		text-align: center;
		line-height: 60px;
		margin: 0 auto;
	}
	
	.select-right-down ul li:first-child {
		border-bottom: 2px solid #F3F3F3;
	}
	
	.iconyoujiantou1 {
		transform: rotate(90deg);
		color: #ED5400;
	}
	
	.first-menu-box {
		position: relative;
	}
	

	
	.great-video-box {
		width: 100vw;
		height: auto;
		background: white;
		/*margin-top: 10px;*/
	}
	
	.h-card {
		background: #fff;
		box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.05);
		padding-top: 20px;
	}
	
	.h-t-title.h-t-more {
		width: 670px;
	}
	
	.h-t-title {
		align-items: center;
		width: 670px;
		margin-left: 50px;
		position: relative;
	}
	
	.h-t-info {
		font-size: 36px;
		color: #181818;
		font-weight: bold;
		padding-left: 26px;
		display: flex;
		flex: 1;
		justify-content: space-between;
		position: relative;
		height: 44px;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-t-info::after {
		content: "";
		display: block;
		position: absolute;
		transform-origin: 0 0;
		width: 5px;
		top: 0;
		left: 0;
		height: 44px;
		transform-origin: left 0;
		background: red;
		background: linear-gradient(0deg, rgba(204, 74, 77, 1), rgba(247, 127, 108, 1));
		border-radius: 3px;
	}
	
	.h-t-info>div {
		font-weight: bold;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-great-tab {
		width: 100vw;
		height: 80px;
	/*	background: pink;*/
		padding: 0 30px 0 0;
		display: flex;
		margin-top: 20px;
	}
	
	.select-right {
		width: 524px;
		height: 80px;
		background-size: 145px 80px;
		padding: 0 30px 0 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
    background: white;
    position: relative;
	}
	.select-right p {
		font-size: 22px;
		color: #ED5400;
		margin-right: 15px;
		line-height: 40px;
		background: url(../../assets/images/homePv.png) no-repeat;
		background-size: 165px 40px;
		padding:  0 0 0 20px;
	}
	
	.curParentClass p {
		border-bottom: 4px solid #FF3B30;
	}
	
	.curParentClassAll p {
		border-bottom: 4px solid #FF3B30;
	}
	
	.nav-table {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.parentClassUl {
		white-space: nowrap;
		overflow-x: scroll;
		padding: 10px 0px 10px 45px;
		background: white;
	}
	
	.parentClassLi {
		display: inline-block;
		margin-right: 36px;
		font-size: 28px;
	}
	
	.parentClassLi p {
		padding: 15px 10px;
		/*background: darkgoldenrod;*/
	}
	
	.nav-er-table {
    margin-left: 30px;
	}
	
	.childenClassUl {
	  width: 730px;
		white-space: nowrap;
		overflow-x: scroll;
		font-size: 24px;
		padding: 10px ;
	}
	
	.childenClassLi {
		display: inline-block;
		background: white;
		margin-right: 20px;
		border-radius: 20px;
		border: 1px solid #B3B3B3;
		padding: 0 10px;
		height: 40px;
		line-height: 42px;
		text-align: center;
		padding: 0 22px;
		color: #B3B3B3;
	}
	.h-great-list {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding: 0 30px 20px;
  font-size: 0;
}

.h-great-list li {
  width:330px;
  margin-top: 22px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
.more-video-box{
	width:150px;
	height:45px;
	background:rgba(242,242,242,1);
	border-radius:23px;
	margin: 0 auto;
	text-align: center;
	line-height: 45px;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666666;
	margin-bottom: 50px;
}
.iconyoujiantou {
		transform: rotate(0deg);
		margin-left: 10px;
	}
	.gread-video-box{
		width: 100vw;
		height: calc(100vh - 242px);
		background: white;
		margin-top: 20px;
		overflow: scroll;
		/*background: darkgoldenrod;*/
	}
	.gread-video-box-big{
		width: 100vw;
		height: calc(100vh - 182px);
		background: white;
		overflow: scroll;
		/*background: darkgoldenrod;*/
	}
	.gread-video-box-noMenu{
		width: 100vw;
		height: calc(100vh - 182px);
		background: white;
		overflow: scroll;
		margin-top: 50px;
		/*background: darkgoldenrod;*/
	}
	.great-video-more-container .gread-video-box-big,.great-video-more-container .gread-video-box-noMenu{
		height: calc(100vh - 190px);
	}
	.great-video-more-container .gread-video-box{
		height: calc(100vh - 250px);
	}
	.tip-text {
		width: 100%;
		height: 80px;
		line-height: 80px;
		color: #999999;
		text-align: center;
		font-size: 26px;
		margin-top: 50px;
	}
	::-webkit-scrollbar {
	  height: 0;
	  width: 0;
	  color: transparent;
	   display: none;
  }
  
  .great-top {
    box-sizing: border-box;
  }
</style>